/* table of contents */
/*

I. Global elements

- General
- Headings
- Buttons
- Messages
- Overlay
- Dialog
- Tooltip
- Table
- Form elements
- Fieldsets
- Tabs
- Date picker
- Rounded corners
- Icons

II. Specific elements

- Log In
- Header
- Sidebar
- Content
- Title bar
- Toolbar
- Post list



*/
/*--------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------- GLOBAL ELEMENTS -------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------*/
/**************************************/
/*              GENERAL               */
/**************************************/
/* Global */
body {
    color: #333;
    font-family: SimSun, Arial, Helvetica, sans-serif;
    background: #444444;
}

/* main container */
.container {
    width: 100%;
    margin: 0px auto;
}

#content {
    background: none repeat scroll 0 0 #eeeeee;
    margin-left: 200px;
    margin-right: 0;
    padding-bottom: 25px;
    position: relative;
    min-height: 500px;
    width: auto;
    border-top-left-radius: 8px;
}

/**************************************/
/*             crumb               */
/**************************************/
/* Breadcrumb */
#breadcrumb {
    background-color: #e5e5e5;
    box-shadow: 0 0 1px #ffffff;
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    padding-left: 10px;
}

#breadcrumb a {
    padding: 8px 20px 8px 10px;
    display: inline-block;
    background-image: url('../img/breadcrumb.png');
    background-position: center right;
    background-repeat: no-repeat;
    font-size: 11px;
    color: #666666;
}

#breadcrumb a:hover {
    color: #333333;
}

#breadcrumb a:last-child {
    background-image: none;
}

#breadcrumb a.current {
    font-weight: bold;
    color: #444444;
}

#breadcrumb a i {
    margin-right: 5px;
    opacity: .6;
}

#breadcrumb a:hover i {
    margin-right: 5px;
    opacity: .8;
}

/**************************************/
/*              BUTTONS               */
/**************************************/
/**************************************/
/*              MESSAGES              */
/**************************************/
#m-loginForm .controls div.help-inline {
    display: block;
    text-align: left;
    padding-left: 110px;
}

/**************************************/
/*               TABLE                */
/**************************************/
/*table */
.tableFixed {
    table-layout: fixed;
}

/*table in button*/
.innerButtons {
    margin-left: 4px;
    padding: 0px;
}

/*hover变色 .table-striped tbody tr:nth-child(odd) td 把td去除*/
.table-striped tbody tr:hover {
    background-color: #b0c4de !important;
}

/**************************************/
/*            FORM ELEMENTS           */
/**************************************/
#content .field label {
    float: left;
    text-align: right;
    width: 90px;
    margin-right: 10px;
    cursor: pointer;
    margin-top: 2px;
}

#content input[type="text"],
#content select,
#content textarea {
    padding: 0 0 0 5px;
    border-radius: 5px;
    margin: 0;
    line-height: 26px;
    box-sizing: content-box;
}

#content form .field {
    overflow: hidden;
    padding: 4px 0px;
    margin-right: 2px;
}

#content form .field input[type='text'] {
    width: 130px;
    height: 24px;
}

/**************************************/
/*            SYSTEM HEADER                */
/**************************************/
#header {
    border-bottom: 1px solid #555555;
    height: 77px;
    position: relative;
    width: 100%;
    z-index: -9;
}

#header .loginInfos {
    float: left;
    color: #FFFFFF;
    font-size: 28px;
    padding-top: 30px;
    padding-left: 20px;
}

/**************************************/
/*            CONTENT HEADER                */
/**************************************/
#content-header {
    background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#ffffff), to(#dddddd));
    background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
    background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
    background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
    background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
    background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
    border-top-left-radius: 8px;
    height: 50px;
    width: 100%;
    margin-top: -43px;
    z-index: 20;
    border-bottom: 1px solid #e5e5e5;
}

#content-header h1 {
    color: #555555;
    font-size: 24px;
    font-weight: normal;
    float: left;
    text-shadow: 0 1px 0 #ffffff;
    margin-left: 20px;
    position: absolute;
}

#content-header h1,
#content-header .btn-group {
    margin-top: 5px;
}

/**************************************/
/*            Sidebar Navigation                */
/**************************************/
#sidebar {
    display: block;
    float: left;
    position: relative;
    width: 200px;
    z-index: 16;
}

#sidebar > ul {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    position: absolute;
    width: 200px;
    border-top: 1px solid #393939;
    border-bottom: 1px solid #4E4E4E;
}

#sidebar > ul > li {
    border-top: 1px solid #4E4E4E;
    border-bottom: 1px solid #393939;
}

#sidebar > ul > li.active {
    background-color: #3a3a3a;
    background-image: -webkit-gradient(linear, 0 0%, 0 100%, from(#333333), to(#3f3f3f));
    background-image: -webkit-linear-gradient(top, #333333 0%, #3f3f3f 100%);
    background-image: -moz-linear-gradient(top, #333333 0%, #3f3f3f 100%);
    background-image: -ms-linear-gradient(top, #333333 0%, #3f3f3f 100%);
    background-image: -o-linear-gradient(top, #333333 0%, #3f3f3f 100%);
    background-image: linear-gradient(top, #333333 0%, #3f3f3f 100%);
}

#sidebar > ul > li > a {
    padding: 10px 0 10px 15px;
    display: block;
    color: #AAAAAA;
}

#sidebar > ul > li > a:hover {
    background-color: #4A4A4A;
    text-decoration: none;
}

#sidebar > ul > li > a > i {
    margin-right: 10px;
}

#user-nav > ul > li > a > i,
#sidebar li a i {
    vertical-align: top;
    background-image: url('../img/glyphicons-halflings-white.png');
    opacity: .5;
    margin-top: 2px;
}

#sidebar > ul > li > a > .label {
    background-color: #333333;
}

#sidebar > ul > li > a > .label {
    margin: 0 20px 0 0;
    float: right;
    padding: 3px 5px 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}

#sidebar > ul > li.open.submenu > a {
    border-bottom: 1px solid #393939;
}

#sidebar > ul > li.open.active.submenu > a {
    border-bottom: 1px solid #2A2A2A;
}

#sidebar > ul li ul {
    display: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset;
}

#sidebar > ul li.open > ul {
    display: block;
}

#sidebar > ul ul {
    border-top: 1px solid #4E4E4E;
    background-color: #2A2A2A;
}

#sidebar > ul > li > ul > li {
    color: #cfc5c5;
}

#sidebar > ul > li > ul > li > a {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #202020;
    padding: 10px 0px 10px 30px;
    display: block;
    color: #777777;
}

#sidebar > ul > li > ul > li > ul > li > a {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #202020;
    padding: 10px 10px 10px 10px;
    display: block;
    color: #777777;
    opacity: 100;
    border-radius: 5px
}

#sidebar > ul > li > ul > li a:hover,
#sidebar > ul > li > ul > li.active > a {
    color: #b94a48;
    font-weight: bold;
}

/*#sidebar > ul>li ul a:hover{*/
/*color: #b94a48;*/
/*}*/

#sidebar > ul > li.open > ul > li.active > a {
    background: url("../img/menu-active.png") no-repeat scroll right center transparent !important;
}

#sidebar > ul ul li:first-child a {
    border-top: 0;
}

#sidebar > ul ul li:last-child a {
    border-bottom: 0;
}

/**************************************/
/*              USEFUL	              */
/**************************************/
.topCircleBorder {
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-left: 1px solid #ddd;
}

.formLayOut {
    float: left;
}

.rightLayOut {
    float: right;
}

.modifyPadding {
    padding-bottom: 10px;
}

.marginBottom5 {
    margin-bottom: 5px;
}

.paddingTop10 {
    padding-top: 10px;
}

.paddingBottom10 {
    padding-bottom: 10px;
}

.paddingRight10 {
    padding-right: 10px;
}

.paddingLeft20 {
    padding-left: 20px;
}

.marginTop20 {
    margin-top: 20px;
}

.sub {
    padding: 10px;
}

.no-margin,
.container .no-margin {
    margin: 0;
}

.no-padding .container .no-padding {
    padding: 0;
}

.marginLeft60 {
    margin-left: 30px;
}

.displayBlock {
    display: block;
}

/**************************************/
/*          nav          */
#user-nav {
    position: absolute;
    right: 30px;
    top: 5px;
    z-index: 20;
    margin: 0;
}

.navbar .nav > li > a {
    margin: 0;
    padding: 0;
}

/**************************************/
/*          TRIPOLI OVERRIDE          */
/**************************************/
/** sub-sidebar **/
.sub-sidebar,
.sub-sidebar-form {
    position: absolute;
    margin: 0px;
    padding: 0px;
    top: 35px;
    left: 90%;
    background: #808080;
    list-style: none;
    z-index: 99;
    min-width: 80px;
    display: none;
    white-space: nowrap;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CDCDCD;
    opacity: 1;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.sub-sidebar-form {
    padding-bottom: 10px;
}

.sub-sidebar:before,
.sub-sidebar:after,
.sub-sidebar-form:before,
.sub-sidebar-form:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.sub-sidebar:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #FFFFFF;
    border-width: 10px;
    top: 50%;
    margin-top: -10px;
}

.sub-sidebar-form:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #FFFFFF;
    border-width: 10px;
    top: 20px;
    margin-top: -10px;
}

.sub-sidebar:before {
    border-color: rgba(215, 215, 215, 0);
    border-right-color: #CDCDCD;
    border-width: 11px;
    top: 50%;
    margin-top: -11px;
}

.sub-sidebar-form:before {
    border-color: rgba(215, 215, 215, 0);
    border-right-color: #CDCDCD;
    border-width: 11px;
    top: 20px;
    margin-top: -11px;
}

.sub-sidebar > li {
    position: relative;
    margin: 0px;
    padding: 5px 0px 0px 0px;
    list-style: none;
    display: inline-block;
    text-align: center;
    font-size: 11px;
    color: #626262;
    width: 60px;
}

.sub-sidebar li a {
    color: #626262;
}

.sub-sidebar li:hover a,
.sub-sidebar li.active a {
    color: #008299;
}

.sub-sidebar li.divider {
    height: 53px;
    width: 2px;
    margin-top: -12px;
    margin-bottom: -11px;
    border-right: 1px solid #FFFFFF;
    border-left: 1px solid #CDCDCD;
}

.sub-sidebar-form > li {
    position: relative;
    margin: 0px;
    padding: 5px 10px 2px 10px;
    list-style: none;
    display: block;
    font-size: 1.2em;
    color: #626262;
    min-width: 120px;
    text-align: center;
}

.sub-sidebar > li a,
.sub-sidebar-form > li a {
    display: block;
    padding: 5px;
    color: #626262;
}

.sub-sidebar-form > li > a i,
.sub-sidebar-form > li > a .sidebar-text {
    color: #626262;
}

.sub-sidebar-form > li > a:hover i,
.sub-sidebar-form > li > a:hover .sidebar-text,
.sub-sidebar-form > li.active > a i,
.sub-sidebar-form > li.active > a .sidebar-text {
    color: #FFFFFF;
}

.sub-sidebar-form > li > a:hover,
.sub-sidebar-form > li.active > a {
    color: #FFFFFF;
    text-decoration: none;
    background-color: #acb1a0;
    background-repeat: repeat-x;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00a0b1', endColorstr='#ff008299', GradientType=0);
}

/** end sub-sidebar**/
/*this block for display sub-sidebar if any*/
#sidebar > ul > li.open > ul li:hover ul {
    display: block;
}

#sidebar li ul li.secondSideBarLi {
    margin: 2px 5px;
    padding: 0px 0px;
    display: inline-block;
    min-width: 80px;
}

/**************************************/
/*          pagination          */
/**************************************/

.pageInput {
    display: inline;
    float: left;
    margin: 2px 5px 0 10px !important;
    width: 30px !important;
    height: 30px;
}

.totalpages {
    display: inline;
    float: left;
    margin: 4px 10px 0 0;
}


.fireText {
    font-weight: bold;
    color: #005580;
}

.addButtonSize {
    width: 80px;
}

.selectWidthSameText {
    width: 206px;
    height: 26px;
    margin-bottom: 10px !important;
}

.smallInputText {
    width: 40px;
}

.bottomMargin20 {
    margin: 20px 0;
}

.addButtonMarginLeft {
    margin-left: 357px;
}

.importantColor {
    color: red;
}

.selectCustomer {
    width: 130px;
    height: 24px;
    margin-bottom: 0px;
}
